<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>学IT - 后台管理系统</title>
  <!-- 
    UI 框架
   -->
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

  <!-- 
    字体
   -->
  <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">

  <!-- 
    pjax 顶部进度条特效
   -->
  <link rel="stylesheet" href="node_modules/nprogress/nprogress.css">

  <!-- 
    less 样式入口文件
   -->
  <link rel="stylesheet" href="public/less/index.css">
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <nav class="navbar navbar-custom">
      <div class="navbar-header">
        <a href="javascript:;" class="navbar-brand">
          <i class="fa fa-navicon"></i>
        </a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="javascript:;">
            <i class="fa fa-bell"></i>
            <span class="badge">8</span>
          </a>
        </li>
        <li>
          <a href="./settings.html">
            <i class="fa fa-user"></i> 个人中心
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="fa fa-sign-out"></i> 退出
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="fa fa-tasks"></i>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <!-- 主体 -->
  <div class="main">
    <!-- 侧边栏 -->
    <div class="aside">
      <!-- 个人资料 -->
      <div class="profile">
        <!-- 头像 -->
        <div class="avatar img-circle">
          <img src="public/uploads/avatar.jpg">
        </div>
        <h4>布头儿</h4>
      </div>
      <!-- 导航菜单 -->
      <div class="navs">
        <ul class="list-unstyled">
          <li>
            <a href="./index.html" class="active">
              <i class="fa fa-home"></i> 仪表盘
            </a>
          </li>
          <li>
            <a href="./user_list.html">
              <i class="fa fa-bell"></i> 用户管理
            </a>
          </li>
          <li>
            <a href="./teacher_list.html">
              <i class="fa fa-bell"></i> 讲师管理
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <i class="fa fa-cog"></i> 课程管理
              <i class="arrow fa fa-angle-right"></i>
            </a>
            <ul class="list-unstyled">
              <li>
                <a href="./course_add.html">
                                     课程添加
                                </a>
              </li>
              <li>
                <a href="./course_list.html">
                                    课程列表
                                </a>
              </li>
              <li>
                <a href="./course_category.html">
                                    课程分类
                                </a>
              </li>
              <li>
                <a href="./course_topic.html">
                                    课程专题
                                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="./advert_list.html">
              <i class="fa fa-bell"></i> 广告管理
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <i class="fa fa-cog"></i> 系统设置
              <i class="arrow fa fa-angle-right"></i>
            </a>
            <ul class="list-unstyled">
              <li>
                <a href="javascript:;">
                                    网站设置
                                </a>
              </li>
              <li>
                <a href="javascript:;">
                                     权限管理
                                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <!-- 其它页面自已调整吧 -->
    <div class="container-fluid">
      <!-- 个人资料 -->
      <div class="body teacher-profile">
        <div class="profile">
          <div class="row survey">
            <div class="col-md-3">
              <div class="cell money">
                <i class="fa fa-money"></i>
                <span>我的收入</span>
                <h5>￥11.11</h5>
              </div>
            </div>
            <div class="col-md-3">
              <div class="cell th">
                <i class="fa fa-th"></i>
                <span>课程数量</span>
                <h5>12</h5>
              </div>
            </div>
            <div class="col-md-3">
              <div class="cell user">
                <i class="fa fa-user"></i>
                <span>用户数量</span>
                <h5>236</h5>
              </div>
            </div>
            <div class="col-md-3">
              <div class="cell eye">
                <i class="fa fa-eye"></i>
                <span>浏览量</span>
                <h5>22435</h5>
              </div>
            </div>
          </div>
          <div class="chart">
            <div id="main" style="width: 600px;height:400px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="node_modules/jquery/dist/jquery.js"></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
  <script src="node_modules/nprogress/nprogress.js"></script>
  <!-- 百度开源的图标库 -->
  <script src="node_modules/echarts/dist/echarts.js"></script>

  <!-- 公共的 js 脚本文件 -->
  <script src="public/js/common.js"></script>
  <script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>
